<!--  -->
<template>
  <div>
    <van-nav-bar 
      title="修改手机号"  
      right-text="完成"
      left-text="取消"
      @click-left="$emit('close')"
      @click-right="onConfirm"
    />

    <div class="name-field-wrap">
    <van-form>
      <van-field v-model="mobile" name="mobile" placeholder="请输入手机号码"
        :rules="telRules" />
    </van-form>
    </div>
  </div>
</template>

<script>
import { updateUser } from '@/api/user'
export default {
  name:'UpdateGender',
  components: {},
  props:{
    value: {
      type: String,
      require: true
    }, 
    user: Object,
  },
  data() {
    return {
      mobile: this.value,
      // 校验手机号码
      telRules: [{
        required: true,
        message: '手机号码不能为空',
        trigger: 'onBlur'
      }, {
        // 自定义校验规则
        validator: value => {
          return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
            .test(value)
        },
        message: '请输入正确格式的手机号码',
        trigger: 'onBlur'
      }],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted(){},
  methods: {
    async onConfirm(value) {
      this.$toast.loading({
        message: '保存中',
        forbidClick: true  //禁止背景点击
      })

      try {
        const { data } = await updateUser({
          "user_name": this.user.user_name,
          "phonenumber": this.mobile,
          "department": this.user.department,
        })
        debugger
        if (data.code != "200") {
          this.$message.fail('修改失败！' + data.msg);
        } else {
          this.$toast.success(data.msg);
          this.$emit('input',this.mobile);
          //更新成功->修改父组件->关闭弹出层
          this.$emit('close')
        }
      } catch (error) {
        if (error) {
          this.$toast.fail('修改失败!');
        }
      }

    }
  }
}

</script>
<style lang='less' scoped>

</style>